<template>
    <div ref="cardRef">
        <el-card shadow="never" class="!border-none" :class="{ 'h-screen': isFullscreen }">
            <div>
                <el-form ref="formRef" :inline="true" :model="params" class="flex-1 items-center justify-between "
                    label-suffix='：' label-width="90px">
                    <el-row :gutter="50">
                        <el-col :xl="8" :lg="8" :md="12" :sm="24">
                            <el-form-item prop="name" label="规则名称" class="w-full">
                                <el-input v-model="params.name" placeholder="请输入" clearable />
                            </el-form-item></el-col>
                        <el-col :xl="8" :lg="8" :md="12" :sm="24">
                            <el-form-item prop="status" label="使用状态" class="w-full">
                                <el-select v-model="params.status" placeholder="请选择" clearable>
                                    <el-option label="关闭" value="close" />
                                    <el-option label="运行中" value="run" />
                                </el-select>
                            </el-form-item></el-col>
                        <el-col v-if="advanced" :xl="8" :lg="8" :md="12" :sm="24">
                            <el-form-item prop="times" label="调用次数" class="w-full">
                                <el-input v-model="params.times" placeholder="请输入" clearable />
                            </el-form-item></el-col>
                        <el-col v-if="advanced" :xl="8" :lg="8" :md="12" :sm="24">
                            <el-form-item prop="date" label="更新日期" class="w-full">
                                <el-date-picker v-model="params.date" type="date" placeholder="请选择" clearable />
                            </el-form-item></el-col>
                        <el-col v-if="advanced" :xl="8" :lg="8" :md="12" :sm="24">
                            <el-form-item prop="searchtext" label="关键词" class="w-full">
                                <el-input v-model="params.searchtext" placeholder="请输入" clearable />
                            </el-form-item></el-col>

                        <el-col :lg="advanced ? 24 : 8" :sm="24">
                            <el-form-item class="!grid justify-items-end !mr-0">
                                <el-button type="primary">查询</el-button>
                                <el-button @click="resetForm(formRef)" plain>重置</el-button>
                                <el-button type="primary" link @click="advanced = !advanced">{{ advanced ? '收起' : '展开'
                                    }}
                                    <Down v-if="!advanced" theme="outline" size="16" fill="#409eff" />
                                    <Up v-else theme="outline" size="16" fill="#409eff" />
                                </el-button>
                            </el-form-item></el-col>
                    </el-row>
                </el-form>
                <div class="flex justify-between align-center mb-6">
                    <el-button type="primary" @click="handleAdd">
                        <Plus theme="outline" size="16" fill="#ffffff" />新建
                    </el-button>
                    <div class="flex self-center ">
                        <el-dropdown trigger="click" @command="handleTableSizeCommand" class="mr-4">
                            <span>
                                <el-tooltip content="密度" placement="top">
                                    <RowHeight theme="outline" size="14" fill="#515a6e" />
                                </el-tooltip>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :class="{ activeDropdown: tableSize === 'default' }"
                                        command="default">默认</el-dropdown-item>
                                    <el-dropdown-item :class="{ activeDropdown: tableSize === 'large' }"
                                        command="large">宽松</el-dropdown-item>
                                    <el-dropdown-item :class="{ activeDropdown: tableSize === 'small' }"
                                        command="small">紧凑</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                        <el-dropdown trigger="click" class="mr-4">
                            <span @click="toggleScreen">
                                <el-tooltip v-if="!isFullscreen" content="全屏" placement="top">
                                    <FullScreen theme="outline" size="14" fill="#515a6e" />
                                </el-tooltip>
                                <el-tooltip v-else content="退出全屏" placement="top">
                                    <OffScreen theme="outline" size="14" fill="#515a6e" />
                                </el-tooltip>
                            </span>
                        </el-dropdown>

                        <el-dropdown trigger="click" class="mr-4">
                            <span @click="refresh">
                                <el-tooltip content="刷新" placement="top">
                                    <Redo theme="outline" size="14" fill="#515a6e" />
                                </el-tooltip>
                            </span>
                        </el-dropdown>


                        <el-dropdown trigger="click" placement="bottom-end">
                            <span>
                                <el-tooltip content="列设置" placement="top">
                                    <SettingConfig theme="outline" size="14" fill="#515a6e" />
                                </el-tooltip>
                            </span>
                            <template #dropdown>
                                <div>
                                    <div class="text-[14px] p-2 flex justify-between">
                                        <el-text>列展示</el-text><el-button type="primary" link
                                            @click="resetColumns">重置</el-button>
                                    </div>
                                    <el-divider class="!m-0" />
                                    <el-checkbox-group v-model="selectColumns" class="p-2 flex flex-col">
                                        <el-checkbox v-for="item in tableColumns" :key="item" :label="item.label"
                                            class="p-1" :value="item">
                                            {{ item.label }}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </template>
                        </el-dropdown>

                    </div>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" border :size="tableSize" v-loading="loading"
                v-if="selectColumns.length > 0">
                <el-table-column v-if="dynamicColumns('date')" prop="date" label="Date" width="180" />
                <el-table-column v-if="dynamicColumns('name')" prop="name" label="Name" width="180" />
                <el-table-column v-if="dynamicColumns('address')" prop="address" label="Address" />
            </el-table>
            <div class="flex flex-wrap gap-3  justify-between items-center mt-4 mb-4">
                <div class="w-full sm:w-1/6  "><el-text class="flex justify-center sm:justify-start">共 {{ total }}
                        条数据</el-text>
                </div>
                <div class="hidden sm:flex justify-end w-full sm:w-4/6">
                    <el-pagination background v-model:page-size="params.pageSize" v-model:current-page="params.page"
                        @change="getData" :page-sizes="[10, 20, 50, 100, 200]" :pager-count="5"
                        layout="sizes, prev, pager, next, jumper" :total="total" />
                </div>
                <div class="sm:hidden justify-center sm:justify-end w-full sm:w-4/6">
                    <el-pagination class="justify-center flex-wrap smPagination gap-2" background :pager-count="5"
                        @change="getData" layout=" prev, pager, next, jumper" size="small" :total="total" />
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { Down, Up, Plus, RowHeight, FullScreen, OffScreen, Redo, SettingConfig } from '@icon-park/vue-next'
import { toggleLocalFullscreen } from '@/utils/common'

const formRef = ref<FormInstance>()
const cardRef = ref<HTMLElement>()

const tableSize = ref('default')
const advanced = ref(false)
const isFullscreen = ref(false)
const loading = ref(false)
const total = ref(100)
const params = ref({
    page: 1,
    pageSize: 10,
    searchtext: '',
    sortBy: 'id',
    descending: true,
    datetime: null,
    times: null,
    name: null,
    date: null,
    status: null,
})
const getData = async () => {

}
const tableColumns = ref([
    {
        label: '日期',
        prop: 'date',
        show: true,
    },
    {
        label: '姓名',
        prop: 'name',
        show: true,
    },
    {
        label: '地址',
        prop: 'address',
        show: true,
    },
])
const selectColumns = ref(tableColumns.value.filter(item => item.show))
const tableData = ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
])
const dynamicColumns = ((val: string) => {
    return selectColumns.value.find(item => item.prop == val)
})
const resetColumns = () => {
    selectColumns.value = tableColumns.value.filter(item => item.show)
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const handleAdd = () => {

}
const handleTableSizeCommand = (command: string) => {
    tableSize.value = command
}

const toggleScreen = () => {
    isFullscreen.value = !isFullscreen.value
    if (cardRef.value) {
        toggleLocalFullscreen(cardRef.value);
    }
}

const refresh = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 500)
}
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>
<style scoped>
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 100%;
}

:deep(.activeDropdown) {
    background-color: #ecf5ff;
    color: #45a1ff !important;
}
</style>